<template>
	<view class="">
		<view class="monthBillWrap">
		
		  <view class="top_zhan" :style="[{ height: calendarHeight + 'px' }]"></view>
		
		  <view class="top" id="topId">
		
		    <view class="timerForm">
		      <view class="timerForm_top">{{thisYear}}年{{thisMonth}}月</view>
		      <view class="calendar">
		        <view class="calendar_week">
		          <view class="week_min">周日</view>
		          <view class="week_min">周一</view>
		          <view class="week_min">周二</view>
		          <view class="week_min">周三</view>
		          <view class="week_min">周四</view>
		          <view class="week_min">周五</view>
		          <view class="week_min">周六</view>
		        </view>
		
		        <view class="calendar_day" :class="[unfoldSta ? '' : 'calendar_dayHide']">
		          <view class="calendar_day_min" v-for="item in calendarList">
		            <view class="calendar_day_min_con" :class="[item.thisSta?'calendar_day_min_conThis':'',item.month==thisMonth?'calendar_day_min_conThisMonth':'']">{{item.day==1?item.month+'月':item.day}}</view>
		            <view class="stateSign" v-if="item.waitSta">待还</view>
		            <!-- <view class="stateSign_no">逾期</view> -->
		          </view>
		        </view>
		      </view>
		    </view>
		
		    <view class="unfold" onTap="unfoldBtn">
		      <view class="unfold_icon_wrap" :class="[unfoldSta ? 'unfold_icon_wrapT' : '']">
		        <text class="iconfont icon-fangxiangyou unfold_icon"></text>
		      </view>
		    </view>
		
		  </view>
		  
		
		
		
		  <view class="list_wrap">
		    <view class="list_min" v-for="item in stayList">
		      <view class="list_min_top">
		        <view class="list_min_top_L">{{item.exptimerArr[0]}}月{{item.exptimerArr[1]}}日待还</view>
		        <view class="list_min_top_R">
					<!-- data-param={{item.oid}}  -->
		          <text style="margin-right:8rpx;" @tap="billnavigate(item.oid)" >账单明细</text>
		          <text class="iconfont icon-fangxiangyou"></text>
		        </view>
		      </view>
		
		      <view class="list_min_mid">
		        <view class="list_min_mid_L">
		          <text class="list_min_mid_L_num">{{item.price/100}}</text>
		          <text class="list_min_mid_L_text">元</text>
		        </view>
		        <view class="list_min_mid_R" @tap="billnavigate(item.oid)" >交租金</view>
		      </view>
		
		      <view class="list_min_bot">{{item.goodsData.title}}</view>
		
		    </view>
		
		
		    <view class="product-none" v-if="stayList.length==0">
		      <view class="product-none_text">本月都已还清了哦~</view>
		    </view>
		
		  </view>
		
		
		
		
		
		
		</view>
	</view>
</template>

<script>
export default {
	data(){
		return {
			calendarList: [],
			unfoldSta: false,
			thisYear: '0000',
			thisMonth: '0',
			calendarHeight: '150',
			startTimerNum: 0,
			endTimerNum: 0,
			stayList:[]
		}
	},
	onLoad() {
		this.resetBar();
		this.getThisMonth();
	},

	props: {
		recentlyBill: {},
	},
	created() {
		console.log('zhangdan',this.recentlyBill)
	},
	methods: {
		// 重置颜色
		  resetBar(){
		    // my.setNavigationBar({
		    //   reset: true
		    // });
		  },
		
		  navigateTo(e){
		    app.navigateTo(e);
		  },
		billnavigate(oid){
			uni.navigateTo({
			    url:`/pages/order/bill/index?param=`+ oid
			})
		},
		  // 获取当前月份
		  getThisMonth(){
		    let date = new Date();
		    let year = date.getFullYear();
		    let month = date.getMonth() + 1;
		    let day = date.getDate();
		
		    let thisMonthDay = new Date(year, month, 0).getDate();
		    let frontMonthDay = new Date(year, month-1, 0).getDate();
		    let nextMonthDay = new Date(year, month+1, 0).getDate();
		    let weekNum = new Date(year, month,0).getDay();
		    let nextNum = 6 - weekNum;
		    let frontNum = 42 - thisMonthDay - nextNum;
		
		    let arr = [];
		    for(let i=1; i<=frontNum; i++){
		      let obj = {
		        day: frontMonthDay-(frontNum-i),
		        month: month==1?12:month-1,
		        thisSta: false,
		        waitSta: false
		      }
		      arr.push(obj);
		    }
		    for(let i=1; i<=thisMonthDay; i++){
		      let obj = {
		        day: i,
		        month: month,
		        thisSta: false,
		        waitSta: false
		      }
		      if(i == day){
		        obj.thisSta = true
		      }
		      arr.push(obj);
		    }
		    for(let i=1; i<=nextNum; i++){
		      let obj = {
		        day: i,
		        month: month==12?1:month+1,
		        thisSta: false,
		        waitSta: false
		      }
		      arr.push(obj);
		    }
		
		    let start = year +'/'+ arr[0].month + '/' + arr[0].day + ' ' + '00:00:00';
		    let end = year +'/'+ arr[arr.length-1].month + '/' + arr[arr.length-1].day + ' ' + '00:00:00';
		
		    
		    let startTimer = new Date(start);
		    let startTimerNum = startTimer.getTime()/1000 + '';
		    // let endTimer = new Date("2022-08-31 00:00:00");
		    let endTimer = new Date(end);
		    let endTimerNum = endTimer.getTime()/1000 + '';
		
		    console.log(start,end,startTimerNum,endTimerNum);
		    
		   
			this.calendarList = arr,
			this.thisYear = year,
			this.thisMonth = month,
			this.startTimerNum = startTimerNum,
			this.endTimerNum = endTimerNum
		    
		
		    // 获取高度
		    this.getCalendarHeight();
		
		    this.getList(startTimerNum,endTimerNum);
		  },
		
		upTime(format,time) {
		    if(!time) {
		        return ''
		    }
		    // let format = "%Y-%M-%D %h:%m:%s"
		    format = format ? format: "%Y-%M-%D"
		    time = time.toString().length == 10 ? time*1000:time
		    let dataTime = new Date(time)
		    let year = dataTime.getFullYear()
		    let month = (dataTime.getMonth() + 1).toString().padStart(2, 0)
		    let day = dataTime.getDate().toString().padStart(2, 0)
		    let Hours = dataTime.getHours().toString().padStart(2, 0)
		    let Minutes = dataTime.getMinutes().toString().padStart(2, 0)
		    let Seconds = dataTime.getSeconds().toString().padStart(2, 0)
		    format = format.replace(/(%Y|%M|%D|%h|%m|%s)/g, (n) => {
		        return {
		            '%Y': year, '%M': month, '%D': day, '%h': Hours, '%m': Minutes, '%s': Seconds,
		        }[n]
		    })
			    return format
		
		},
		  // 获取列表
		  getList(startTime,endTime){
		    let data = {
		      startPeriodStartDate: startTime,
		      startPeriodEndDate: endTime,
		    }
			this.$http('order.monthList',data).then(res => {
				console.log('账单',res)
				if(res.code == 200 && res.data){
						
				  this.getGoodsData(res.data)
						
				  let arr = this.calendarList
						
				  res.data.forEach(item => {
				    let timer = (item.exptimerArr[0]-0)+'-'+(item.exptimerArr[1]-0);
				    arr.forEach(ite=>{
				      let tim = ite.month + '-' + ite.day;
				      if(tim == timer){
				        ite.waitSta = true;
				      }
				    })
				  });
						
				this.stayList= res.data,
				this.calendarList= arr
				}
			});
		  },
		
		  // 转换商品信息格式
		  getGoodsData(params){
		    return new Promise((resole,reject)=>{
		        for (let i = 0;i<params.length;i++){
		          let newdat = JSON.parse(params[i].productParams);
		          params[i].goodsData = newdat;
		          let exptim = this.upTime("%Y/%M/%D",params[i].expiretime);
		          let exptimerArr = [];
		          exptimerArr.push(exptim.split('/')[1]-0,exptim.split('/')[2]-0);
		          params[i].exptimerArr = exptimerArr;
		        }
		        resole(params)
		    })
		},
		
		  // 点击展开
		  unfoldBtn(){
		    this.setData({
		      unfoldSta: !this.data.unfoldSta
		    })
		    this.getCalendarHeight();
		  },
		
		
		  // 获取日期表高度
		  getCalendarHeight(){
		    let that = this;
			const query = uni.createSelectorQuery().in(that);
			query.select('#topId').boundingClientRect(ret => {
				let hei = Math.round(ret[0].height);
				that.calendarHeight= hei
			
			console.log(hei)
			}).exec();
		    // uni.createSelectorQuery()
		    //   .select('#topId').boundingClientRect()
		    //   .exec((ret) => {
		    //     let hei = Math.round(ret[0].height);
		    //     this.calendarHeight= hei
		        
		    //     console.log(hei)
		    // })
		  }
		  
	}
}
</script>

<style lang="scss">
	page{
	  background-color: #F7F8F9;
	}
	
	.monthBillWrap{
	  width: 100vw;
	  position: relative;
	}
	
	.top_zhan{
	  width: 100vw;
	}
	
	.top{
	  width: 100vw;
	  position: fixed;
	  left: 0;
	  top: 0;
	  z-index: 10;
	}
	.timerForm{
	  background-color: #fff;
	}
	.timerForm_top{
	  font-size: 40rpx;
	  font-weight: bold;
	  color: #333333;
	  line-height: 54rpx;
	  padding: 24rpx;
	}
	.calendar{
	  padding: 0 24rpx 38rpx;
	}
	.calendar_week{
	  width: 100%;
	  display: flex;
	  justify-content: space-between;
	}
	.week_min{
	  width: 98rpx;
	  text-align: center;
	  font-size: 28rpx;
	  color: #999999;
	  line-height: 40rpx;
	}
	
	
	.calendar_day{
	  width: 100%;
	  height: auto;
	  overflow: hidden;
	  display: flex;
	  justify-content: space-between;
	  flex-wrap: wrap;
	}
	.calendar_dayHide{
	  height: 65rpx;
	}
	.calendar_day_min{
	  width: 98rpx;
	  margin-top: 16rpx;
	  display: flex;
	  justify-content: center;
	  position: relative;
	}
	.calendar_day_min_con{
	  width: 56rpx;
	  height: 56rpx;
	  line-height: 56rpx;
	  text-align: center;
	  border-radius: 50%;
	  font-size: 28rpx;
	  color: #999999;
	}
	
	.calendar_day_min_conThisMonth{
	  color: #333333;
	  font-weight: bold;
	}
	.calendar_day_min_conThis{
	  background-color: #1677FF;
	  font-weight: bold;
	  color: #FFFFFF !important;
	}
	.stateSign{
	  width: 56rpx;
	  height: 32rpx;
	  background: #ffcb31;
	  border-radius: 16rpx 16rpx 16rpx 0rpx;
	  font-size: 20rpx;
	  font-weight: bold;
	  color: #333;
	  line-height: 32rpx;
	  text-align: center;
	  position: absolute;
	  top: -18rpx;
	  right: -16rpx;
	  z-index: 5;
	}
	.stateSign_no{
	  width: 56rpx;
	  height: 32rpx;
	  background: #FF3B30;
	  border-radius: 16rpx 16rpx 16rpx 0rpx;
	  font-size: 20rpx;
	  font-weight: bold;
	  color: #FFFFFF;
	  line-height: 32rpx;
	  text-align: center;
	  position: absolute;
	  top: -18rpx;
	  right: -16rpx;
	  z-index: 5;
	}
	.unfold{
	  width: 170rpx;
	  height: 0rpx;
	  margin: 0 auto;
	  border-top: 34rpx solid #fff;
	  border-left: 18rpx solid transparent;
	  border-right: 18rpx solid transparent;
	  display: flex;
	  justify-content: center;
	}
	.unfold_icon_wrap{
	  width: 40rpx;
	  height: 40rpx;
	  text-align: center;
	  line-height: 40rpx;
	  transform: translateY(-40rpx) rotateZ(90deg);
	}
	.unfold_icon_wrapT{
	  transform: translateY(-40rpx) rotateZ(270deg);
	}
	.unfold_icon{
	  font-size: 30rpx;
	  color:#767D8F; 
	  font-weight: bold;
	}
	
	
	
	.list_wrap{
	  width: 100%;
	  padding: 24rpx 0 80rpx;
	}
	.list_min{
	  width: 702rpx;
	  height: 236rpx;
	  background: #FFFFFF;
	  border-radius: 8rpx;
	  margin: 0 auto;
	  margin-bottom: 24rpx;
	  box-sizing: border-box;
	  padding: 24rpx 24rpx 40rpx;
	}
	.list_min_top{
	  width: 100%;
	  display: flex;
	  justify-content: space-between;
	}
	.list_min_top_L{
	  font-size: 28rpx;
	  color: #767D8F;
	  line-height: 40rpx;
	  padding-top: 16rpx;
	}
	.list_min_top_R{
	  font-size: 28rpx;
	  color: #767D8F;
	  line-height: 40rpx;
	}
	.list_min_mid{
	  width: 100%;
	  display: flex;
	  justify-content: space-between;
	  align-items: flex-end;
	  margin-top: 8rpx;
	}
	.list_min_mid_L{
	  transform: translateY(-4rpx);
	}
	.list_min_mid_L_num{
	  font-size: 48rpx;
	  font-weight: bold;
	  color: #333333;
	  line-height: 66rpx;
	}
	.list_min_mid_L_text{
	  font-size: 28rpx;
	  color: #767D8F;
	  line-height: 40rpx;
	}
	.list_min_mid_R{
	  width: 154rpx;
	  height: 58rpx;
	  background: #ffcb31;
	  border-radius: 28rpx;
	  text-align: center;
	  font-size: 30rpx;
	  font-weight: bold;
	  color: #333;
	  line-height: 58rpx;
	}
	
	.list_min_bot{
	  font-size: 24rpx;
	  color: #767D8F;
	  line-height: 34rpx;
	  margin-top: 4rpx;
	}
	
	
	
	.product-none {
	  width: 200rpx;
	  height: 200rpx;
	  margin: 200rpx auto;
	  /* background-color: #fff; */
	  /* w  1.7*/
	  // background-image: url("/image/otherImg/none.png");
	  background-size: 100% 100%;
	  
	}
	.product-none_text{
	  width: 300rpx;
	  color: #767D8F;
	  padding-top: 220rpx;
	  font-size: 30rpx;
	  position: relative;
	  left: -30rpx;
	}
</style>